import React from "react";
import { Layout } from "antd";
import LeftNav from "./leftNav"; // 引入左侧导航栏组件
import { Outlet } from "react-router-dom"; // 用于渲染子路由内容

const { Header, Content, Sider } = Layout;

function AdminHome() {
  return (
    <Layout style={{ height: "100vh" }}>
      {/* 顶部导航栏 */}
      <Header
        style={{
          backgroundColor: "#fff",
          padding: "0 20px",
          boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
        }}
      >
        <h2 style={{ margin: 0 }}>
          <img
            src="/images/logo-liepin.png"
            alt="猎聘"
            style={{ width: "120px", marginBottom: "20px" }}
          />
          <span style={{ lineHeight: "70px", marginLeft: "10px" }}>
            你好！ 管理员
          </span>
        </h2>
      </Header>
      {/* 左侧导航栏和主体内容区域 */}
      <Layout>
        {/* 左侧导航栏 */}
        <Sider
          width={200}
          style={{
            background: "#001529",
            height: "calc(100vh - 64px)", // 减去顶部导航栏高度
            overflow: "auto", // 启用滚动
          }}
        >
          <LeftNav />
        </Sider>

        {/* 主体内容区域 */}
        <Content
          style={{
            margin: "20px",
            padding: "20px",
            backgroundColor: "#fff",
            borderRadius: "8px",
            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
            height: "calc(100vh - 100px)", // 设置高度为屏幕高度减去顶部区域
            overflow: "hidden", // 隐藏外部滚动条
          }}
        >
          {/* 渲染子路由内容 */}
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
}

export default AdminHome;
